<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
	minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

<style>
    *{
        margin:0px;
        padding:0px;
    }
    body{
        background:#efefef;
    }
    .page_top{
        background:white;
        padding:10px;
        padding-bottom:40px;
    }
    .photo{
        text-align: right;
        margin-bottom:15px;
    }
    .fx{
        text-align: left;
        font-size:15px;	
        color:black;
        padding:15px;
        font-size:17px;
        font-weight:bold;
    
    }
    .userinfo{
        display:flex;
    }
    .otherinfo{
        width:100%;
    }
    .userpic{
        margin-right:10px;
    }
    .userpic img{
        width:70px;
        border-radius:4px;
    }
    .nickname{
        font-size:20px;
        font-weight:bold;
        margin-bottom:24px;
    }
    .wechat_no{
        color:#999;
    }
    .icons{
        width:30%;
        text-align: right;
        padding:15px;
    }
    .icons img{
        margin-left:10px;
    }
    .more{
        display:flex;
        justify-content: space-between;
        width:100%;
    }

    .list_item{
        display:flex;
        justify-content: space-between;
        align-items: center;
        background:white;
        padding:10px;
        position:relative;
    }
    .pictxt{
        display: flex;
        align-items: center;
    }
    .pictxt img{
        margin-left:20px;
    }
    .list .txt{
        margin-left:20px;
    }

    .line{
        width:80%;
        height:1px;
        background:#efefef;
        position:absolute;
        right:0px;
        bottom:0px;
    }
    .list{
        margin-top:10px;
        margin-bottom:10px;
    }
    .tabbar{
        position:fixed;
        width:100%;
        left:0px;
        bottom:0px;
        display:flex;
        background:white;
        padding-top:5px;
       }
    .tab{ 
        padding-bottom:5px;
        width:25%;
        font-size:12px;
        text-align: center;
        position:relative
        }
    .tabbar .txt{
        margin-top:2px;
        }
    .notice{
        position:absolute;
        left:52%;
        top:-3px;
        width:14px;
        height:14px;
        line-height:14px;
        text-align: center;
        font-size:8px;
        background:red;
        color:white;
        border-radius: 50%;
    }
</style>
<div class="all">
    <!-- 页面头部 -->
                <div class="more">
                    <div class="wechat_no">
	            <div class="fx">发现</div>
	  </div>
                    <div class="icons">
                        <img src="chazhao.png" width="20" />
                        <img src="tianjia.png" width="20" />
                    </div>
                </div>
            </div>
        </div>
    <div class="item_list">
        <div class="list1 list">
            <div class="list_item">

                <div class="pictxt">
                    <img src="pengyouquan.png" width="30" />
                    <div class="txt">朋友圈</div>
                </div>
                <img class="arrow" src="arrow_r.png" width="20" />
            </div>
        </div>

<div class="list1 list">
    <div class="list_item">
                <div class="pictxt">
                    <img src="shipinghao.png" width="30" />
                    <div class="txt">视频号</div>
                </div>
                <img class="arrow" src="arrow_r.png" width="20" />
            </div>
        </div>

  <div class="list1 list">
            <div class="list_item">
                <div class="line"></div>
                <div class="pictxt">
                    <img src="saoyisao.png" width="30" />
                    <div class="txt">扫一扫</div>
                </div>
                <img class="arrow" src="arrow_r.png" width="20" />
            </div>
            <div class="list_item">

                <div class="pictxt">
                    <img src="yaoyiyao.png" width="30" />
                    <div class="txt">摇一摇</div>
                </div>
                <img class="arrow" src="arrow_r.png" width="20" />
            </div>
        </div>

  <div class="list1 list">
            <div class="list_item">
                <div class="line"></div>
                <div class="pictxt">
                    <img src="kanyikan.png" width="30" />
                    <div class="txt">看一看</div>
                </div>
                <img class="arrow" src="arrow_r.png" width="20" />
            </div>
            <div class="list_item">

                <div class="pictxt">
                    <img src="souyisou.png" width="30" />
                    <div class="txt">搜一搜</div>
                </div>
                <img class="arrow" src="arrow_r.png" width="20" />
            </div>
        </div>

        <div class="list1 list">
            <div class="list_item">
                <div class="pictxt">
                    <img src="zhibo.png" width="30" />
                    <div class="txt">附近的直播和人</div>
                </div>
                <img class="arrow" src="arrow_r.png" width="20" />
            </div>
        </div>

  <div class="list1 list">
            <div class="list_item">
                <div class="line"></div>
                <div class="pictxt">
                    <img src="gouwu.png" width="30" />
                    <div class="txt">购物</div>
                </div>
                <img class="arrow" src="arrow_r.png" width="20" />
            </div>
            <div class="list_item">

                <div class="pictxt">
                    <img src="youxi.png" width="30" />
                    <div class="txt">游戏</div>
                </div>
                <img class="arrow" src="arrow_r.png" width="20" />
            </div>
        </div>

        <div class="list1 list">
            <div class="list_item">
                <div class="pictxt">
                    <img src="xiaochengxu.png" width="30" />
                    <div class="txt">小程序</div>
                </div>
                <img class="arrow" src="arrow_r.png" width="20" />
            </div>
        </div>

    </div>
    <!-- /页面列表 -->

    <!-- 底部导航 -->
    <div class="tabbar">
        <div class="tab">
            <img src="weixin.png" width="28" />
            <div class="txt">微信</div>
            <div class="notice">5</div>
        </div>
        <div class="tab">
            <img src="tongxunlu.png" width="28" />
            <div class="txt">通讯录</div>
        </div>
        <div class="tab">
            <img src="faxian.png" width="28" />
            <div class="txt">发现</div>
        </div>
        <div class="tab">
            <img src="wo.png" width="28" />
            <div class="txt">我</div>
        </div>
    </div>
    <!-- /底部导航 -->
</div>
